<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务调度中心</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container mt-4">
        <h2 class="mb-4">任务调度中心</h2>
        
        <!-- 任务列表 -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">任务列表</h5>
                <button class="btn btn-primary" @click="showAddModal">添加任务</button>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>任务名称</th>
                            <th>任务组</th>
                            <th>Cron表达式</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="job in jobs" :key="job.id">
                            <td>{{ job.jobName }}</td>
                            <td>{{ job.jobGroup }}</td>
                            <td>{{ job.cronExpression }}</td>
                            <td>
                                <span :class="{'badge bg-success': job.status === 'NORMAL', 'badge bg-warning': job.status === 'PAUSED'}">{{ job.status }}</span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-info me-2" @click="showEditModal(job)">编辑</button>
                                <button v-if="job.status === 'NORMAL'" class="btn btn-sm btn-warning me-2" @click="pauseJob(job)">暂停</button>
                                <button v-if="job.status === 'PAUSED'" class="btn btn-sm btn-success me-2" @click="resumeJob(job)">恢复</button>
                                <button class="btn btn-sm btn-danger" @click="deleteJob(job)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 添加/编辑任务模态框 -->
        <div class="modal fade" id="jobModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ isEdit ? '编辑任务' : '添加任务' }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label class="form-label">任务名称</label>
                                <input type="text" class="form-control" value="test" v-model="currentJob.jobName" :disabled="isEdit">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">任务组</label>
                                <input type="text" class="form-control" value="group" v-model="currentJob.jobGroup" :disabled="isEdit">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">任务类</label>
                                <input type="text" class="form-control" v-model="currentJob.jobClass" :disabled="isEdit">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Cron表达式</label>
                                <input type="text" class="form-control" value="0/5 * * * * ?" v-model="currentJob.cronExpression">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">任务类型</label>
                                <select class="form-select" v-model="currentJob.jobType" @change="handleJobTypeChange">
                                    <option value="HelloWorldJob">简单任务</option>
                                    <option value="FileProcessingJob">文件处理任务</option>
                                    <option value="DataSyncJob">数据同步任务</option>
                                    <option value="EmailNotificationJob">邮件通知任务</option>
                                </select>
                            </div>
                            <!-- 文件处理任务参数 -->
                            <div v-if="currentJob.jobType === 'FileProcessingJob'" class="job-params">
                                <div class="mb-3">
                                    <label class="form-label">源文件路径</label>
                                    <input type="text" class="form-control" v-model="currentJob.jobData.sourcePath">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">处理类型</label>
                                    <select class="form-select" v-model="currentJob.jobData.processType">
                                        <option value="backup">备份</option>
                                        <option value="delete">删除</option>
                                        <option value="analyze">分析</option>
                                    </select>
                                </div>
                            </div>
                            <!-- 数据同步任务参数 -->
                            <div v-if="currentJob.jobType === 'DataSyncJob'" class="job-params">
                                <div class="mb-3">
                                    <label class="form-label">源数据库</label>
                                    <input type="text" class="form-control" v-model="currentJob.jobData.sourceDb">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">目标数据库</label>
                                    <input type="text" class="form-control" v-model="currentJob.jobData.targetDb">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">表名</label>
                                    <input type="text" class="form-control" v-model="currentJob.jobData.tableName">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">批次大小</label>
                                    <input type="number" class="form-control" v-model="currentJob.jobData.batchSize">
                                </div>
                            </div>
                            <!-- 邮件通知任务参数 -->
                            <div v-if="currentJob.jobType === 'EmailNotificationJob'" class="job-params">
                                <div class="mb-3">
                                    <label class="form-label">收件人</label>
                                    <input type="text" class="form-control" v-model="currentJob.jobData.recipients" placeholder="多个收件人用逗号分隔">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">主题</label>
                                    <input type="text" class="form-control" v-model="currentJob.jobData.subject">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">模板</label>
                                    <input type="text" class="form-control" v-model="currentJob.jobData.template">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">优先级</label>
                                    <select class="form-select" v-model="currentJob.jobData.priority">
                                        <option value="high">高</option>
                                        <option value="normal">中</option>
                                        <option value="low">低</option>
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">描述</label>
                                <textarea class="form-control" v-model="currentJob.description"></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">任务参数 (JSON格式)</label>
                                <textarea class="form-control" v-model="currentJob.jobData" rows="5" @input="validateJson"></textarea>
                                <div class="invalid-feedback" v-if="jsonError">{{ jsonError }}</div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="saveJob" :disabled="jsonError">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            new Vue({
                el: '#app',
                data: {
                    jobs: [],
                    currentJob: {
                        jobName: '',
                        jobGroup: '',
                        jobClass: '',
                        cronExpression: '',
                        jobData: '{}'
                    },
                    isEdit: false,
                    jsonError: null,
                    jobModal: null
                },
                created() {
                    this.loadJobs();
                },
                mounted() {
                    this.jobModal = new bootstrap.Modal(document.getElementById('jobModal'));
                },
                methods: {
                    validateJson() {
                        try {
                            if (this.currentJob.jobData) {
                                JSON.parse(this.currentJob.jobData);
                                this.jsonError = null;
                            }
                        } catch (e) {
                            this.jsonError = '请输入有效的JSON格式';
                        }
                    },
                    loadJobs() {
                        axios.get('/api/jobs')
                            .then(response => {
                                console.log('API Response:', response);
                                if (response.data) {
                                    this.jobs = response.data;
                                } else {
                                    console.error('No data received from API');
                                    alert('加载任务列表失败：服务器返回数据为空');
                                }
                            })
                            .catch(error => {
                                console.error('Load jobs error:', error);
                                alert('加载任务列表失败：' + (error.response?.data?.message || error.message || '未知错误'));
                            });
                    },
                    showAddModal() {
                        this.isEdit = false;
                        this.currentJob = {
                            jobName: 'test',
                            jobGroup: 'group',
                            cronExpression: '0/5 * * * * ?',
                            jobType: 'HelloWorldJob',
                            jobClass: 'com.example.job.HelloWorldJob',
                            jobData: {}
                        };
                        this.jobModal.show();
                    },
                    handleJobTypeChange() {
                        this.currentJob.jobClass = 'com.example.job.' + this.currentJob.jobType;
                        this.currentJob.jobData = {};
                    },
                    showEditModal(job) {
                        this.isEdit = true;
                        this.currentJob = {...job};
                        this.jobModal.show();
                    },
                    saveJob() {
                        const method = this.isEdit ? 'put' : 'post';
                        axios[method]('/api/jobs', this.currentJob)
                            .then(() => {
                                this.loadJobs();
                                this.jobModal.hide();
                            })
                            .catch(error => {
                                alert(this.isEdit ? '更新任务失败' : '添加任务失败');
                            });
                    },
                    deleteJob(job) {
                        if (confirm('确定要删除这个任务吗？')) {
                            axios.delete(`/api/jobs/${job.jobName}/${job.jobGroup}`)
                                .then(() => {
                                    this.loadJobs();
                                })
                                .catch(error => {
                                    alert('删除任务失败');
                                });
                        }
                    },
                    pauseJob(job) {
                        axios.post(`/api/jobs/${job.jobName}/${job.jobGroup}/pause`)
                            .then(() => {
                                this.loadJobs();
                            })
                            .catch(error => {
                                alert('暂停任务失败');
                            });
                    },
                    resumeJob(job) {
                        axios.post(`/api/jobs/${job.jobName}/${job.jobGroup}/resume`)
                            .then(() => {
                                this.loadJobs();
                            })
                            .catch(error => {
                                alert('恢复任务失败');
                            });
                    }
                }
            });
        });
    </script>
</body>
</html>